<!--
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->
<section class="side-bar">
    <div class="files">
        <h2>Files</h2>
        <perfect-scrollbar class="side-bar-nav" scroll-to-element [elementId]="listItem">
            <ul *ngIf="currentFile">
                <li *ngIf="aboutFileNames && aboutFileNames.length > 0" #editorFileList id="editorFileListAbout"
                    [class.active]="currentFile.isPackage() || currentFile.isReadMe()" (click)="setCurrentFile(files[0])">
                    <div class="flex-container">
                        <div class="flex">
                            <h3 [class.error]="invalidAboutFileIDs && invalidAboutFileIDs.length > 0">About</h3>
                            <div [class.error]="invalidAboutFileIDs && invalidAboutFileIDs.length > 0">{{aboutFileNames.join(', ')}}</div>
                        </div>
                        <div *ngIf="invalidAboutFileIDs && invalidAboutFileIDs.length > 0" class="error_dot">
                            <svg class="ibm-icon" aria-hidden="true">
                                <use xlink:href="#icon-error_dot"></use>
                            </svg>
                        </div>
                    </div>
                </li>
                <li #editorFileList id="editorFileList{{fileIndex}}" *ngFor="let file of (files | editorFilesFilter); let fileIndex = index"
                    [class.active]="file.getId() === currentFile.getId()" (click)="setCurrentFile(file)">
                    <div class="flex-container">
                        <div class="flex">
                            <h3 [class.error]="file.invalid" *ngIf="file.isModel()">Model File</h3>
                            <h3 [class.error]="file.invalid" *ngIf="file.isScript()">Script File</h3>
                            <h3 [class.error]="file.invalid" *ngIf="file.isAcl()">Access Control</h3>
                            <h3 [class.error]="file.invalid" *ngIf="file.isQuery()">Query File</h3>
                            <div [class.error]="file.invalid">{{file.displayID}}</div>
                        </div>
                        <div *ngIf="file.invalid" class="error_dot">
                            <svg class="ibm-icon" aria-hidden="true">
                                <use xlink:href="#icon-error_dot"></use>
                            </svg>
                        </div>
                    </div>
                </li>
            </ul>
        </perfect-scrollbar>
    </div>
    <div class="actions">
        <div class="add-file">
            <button id="editor_addfile" class="action" type="button" (click)="openAddFileModal()">
                <svg class="standard-icon" aria-hidden="true">
                    <use xlink:href="#icon-file_32"></use>
                </svg>
                Add a file...
            </button>
        </div>
        <div class="download-action">
            <button id="editor_export" type="button" class="action" (click)="exportBNA()">
                <svg class="standard-icon" aria-hidden="true">
                    <use xlink:href="#icon-download_32"></use>
                </svg>
                Export
            </button>
        </div>
    </div>

    <div *ngIf="canDeploy" class="deploy">
        <h2>Update Network</h2>

        <div class="busnet-version">
            <span class="semver-label">From:</span>
            <span class="semver-value"><span class="semver">{{deployedPackageVersion}}</span></span>
        </div>
    
        <div class="busnet-version" *ngIf="!invalidPackage" [class.error]="invalidAboutFileIDs && invalidAboutFileIDs.length > 0">
            <span class="semver-label">To:</span>
            <span *ngIf="!editVersionActive" class="semver-value">
                <span class="semver">
                    <svg *ngIf="invalidAboutFileIDs && invalidAboutFileIDs.length > 0" class="ibm-icon error-dot" aria-hidden="true">
                        <use xlink:href="#icon-error_dot"></use>
                    </svg>
                    {{inputPackageVersion}}
                </span>
                <button *ngIf="!editVersionActive" id="editVersionButton" type="button" class="action" (click)="toggleEditVersionActive()">
                    <svg class="ibm-icon vertical-top" aria-hidden="true">
                        <use xlink:href="#icon-edit_24"></use>
                    </svg>
                </button>
            </span>

            <input *ngIf="editVersionActive" class="semver-value" type="text" [(ngModel)]="inputPackageVersion" (blur)="updateVersion()" />
        </div>

        <div class="busnet-version error" *ngIf="invalidPackage" >
            <span class="semver-value" >Invalid package.json</span>
        </div>

        <button id="editor_deploy" type="button" class="primary" (click)="deploy()" [disabled]="!fileService.isDirty() || !noError">
            Deploy changes
        </button>
    </div>
</section>

<section class="main-view">
    <div class="main-view-content">
        <div>
            <div *ngIf="!editActive" class="business-network-details">
                <div style="flex-shrink:1;align-self: center">
                    <h1 *ngIf="currentFile && (fileType(currentFile)=='Readme' || fileType(currentFile)=='Package')" class="margin-right">About File</h1>
                </div>
                <div style="flex-shrink:1;align-self: center">
                    <h1 *ngIf="currentFile && fileType(currentFile)!='Readme' && fileType(currentFile)!='Package'" class="margin-right">{{
                        fileType(currentFile) }} File</h1>
                </div>
                <div *ngIf="currentFile" style="flex-shrink:1;align-self:center"
                     class="file-name small">{{currentFile.displayID}}
                </div>
                <div *ngIf="(currentFile && !preventNameEdit(currentFile))" class="edit_icon">
                    <button id="editFileButton" type="button" class="action" (click)="toggleEditActive()">
                        <svg class="ibm-icon vertical-top" aria-hidden="true">
                            <use xlink:href="#icon-edit_24"></use>
                        </svg>
                    </button>
                </div>
                <div *ngIf="deletableFile" class="delete_icon">
                    <button id="deleteFileButton" type="button" class="action" (click)="openDeleteFileModal()">
                        <svg class="ibm-icon vertical-top" aria-hidden="true">
                            <use xlink:href="#icon-bin_icon"></use>
                        </svg>
                    </button>
                </div>

                <div *ngIf="currentFile && aboutFileNames && aboutFileNames.length > 1 && (fileType(currentFile)=='Readme' || fileType(currentFile)=='Package')" class="readme_icon_preview">
                    <button id="previewReadmeButton" type="button" class="action" [class.active]="currentFile.isReadMe() && previewReadme"
                            (click)="setReadmePreview(true)">
                        <svg class="ibm-icon vertical-top" aria-hidden="true">
                            <use xlink:href="#icon-view_24"></use>
                        </svg>
                    </button>
                </div>

                <div *ngIf="currentFile && aboutFileNames && aboutFileNames.length > 1 && (fileType(currentFile)=='Readme' || fileType(currentFile)=='Package')" class="readme_icon_edit">
                    <button id="editReadmeButton" type="button" class="action" [class.active]="currentFile && currentFile.isReadMe() && !previewReadme"
                            (click)="setReadmePreview(false)">
                        <svg class="ibm-icon vertical-top" aria-hidden="true">
                            <use xlink:href="#icon-code_24"></use>
                        </svg>
                    </button>
                </div>

                <div *ngIf="currentFile && aboutFileNames && aboutFileNames.length > 1 && (fileType(currentFile)=='Readme' || fileType(currentFile)=='Package')" class="readme_icon_settings">
                    <button id="editPackageButton" type="button" class="action" [class.active]="currentFile && currentFile.isPackage()"
                            (click)="editPackageJson()">
                        <svg class="ibm-icon vertical-top" aria-hidden="true">
                            <use xlink:href="#icon-manage_24"></use>
                        </svg>
                    </button>
                </div>
            </div>

            <div *ngIf="editActive && fileType(currentFile)!='Package' && fileType(currentFile)!='Readme'" class="business-network-details">
                <div class="flex-container" style="flex-direction:column">
                    <div class="edit-file-row">
                        <label class="edit-file-label" for="editName">Name</label>
                        <div *ngIf="fileType(currentFile)=='Model'" class="edit-file-hidden">models/</div>
                        <div *ngIf="fileType(currentFile)=='Script'" class="edit-file-hidden">lib/</div>
                        <div class="edit-file-value">
                            <input *ngIf="!fileNameError" style="margin-top: 0.2rem" type="text" (blur)="editFileName()"
                                   [(ngModel)]="inputFileNameArray[1]">
                            <input *ngIf="fileNameError" class="error-underline" style="margin-top: 0.2rem" type="text"
                                   (blur)="editFileName()" [(ngModel)]="inputFileNameArray[1]">
                        </div>
                        <div *ngIf="fileType(currentFile)=='Model'" class="edit-file-hidden">.cto</div>
                        <div *ngIf="fileType(currentFile)=='Script'" class="edit-file-hidden">.js</div>
                    </div>
                    <div *ngIf="fileNameError" class="error-message">
                        {{fileNameError}}
                    </div>
                </div>
            </div>
        </div>

        <div class="flex">
            <editor-file (packageJsonVersionChange)="editorFileVersionChange($event)" [editorFile]="currentFile" [previewReadmeActive]="previewReadme"></editor-file>
        </div>
    </div>
    <app-footer></app-footer>
</section>
